<template>
    <div>
        <span class="m-shadow" @click="closeSpec"></span>
        <div class="m-proSpec">
        <span class="m-close" @click="closeSpec">X</span>
            <div class="m-proTitle">
                <img src="@/assets/images/p_02.jpg" alt="">
                <div>
                    <p>{{detail.ProjectName || detail.GoodsName}}</p>
                    <span>&yen;{{detail.Price}}</span>
                    <p>已选：背部按摩疗程</p>
                </div>
            </div>
            <div class="m-specbox">
                <p>套餐</p>
                <ul class="m-speclist">
                    <li v-for="(item,index) in cardlist" :key="index"
                    :class="{'active':cardIdx==index}" 
                    @click="chooseCard(index,item.id)">{{item.name}}</li>
                </ul>
            </div>
            <div class="m-specbox">
                <p>套餐项目包含</p>
                <ul class="m-conlist" v-if="cardlist.length>0">
                    <li v-for="item in cardlist[cardIdx].list" :key="item.key">{{item.ProjectName}}</li>
                </ul>
            </div>

            <div class="m-specbottom">
                <span @click="toCart">加入购物车</span>
                <span @click="toBuy">立即购买</span>
            </div>
        </div>
    </div>
</template>
<script>
import {getProjecthasCard,getCardthasProjec,addCard,wxPay} from '@/api/views';
import { mapActions } from 'vuex'
export default {
    name:'',
    props:['detail','goodsid','type'],
    data () {
        return {
            cardlist:[],
            cardIdx:0,
            CardClassId:'',         //对应卡项的id
        }
    },
    methods: {
        ...mapActions([
            'actionBuydata',
        ]),
        closeSpec() {
            this.$emit('closeSpec');
        },
        // 获取项目包含卡项
        getProjectCard() {
            let that = this;
            getProjecthasCard({ProjectId:that.goodsid}).then((result) => {
                that.cardlist = result.list;
            }).catch((err) => {
                
            });
        },
        // 选择卡项
        chooseCard(index,id){
            let that = this;
            that.cardIdx = index;
            that.CardClassId = id;
        },
        /**ispay！=1 为假支付，提示‘到店购买’ */
        // 加入购物车
        toCart() {
            let that = this;
            let ispay = this.cardlist[this.cardIdx].IsPay;
            if(ispay != '1') {
                this.$toast('请到店支付');
                return false;
            }
            let param = {
                goods_id:that.goodsid,
                type:that.type,
                quantity:1,
                customer_id:that.$utils.uid,       //用户id
            }
            addCard(param).then(result=>{
                that.$toast('已添加至购物车，前往购物车查看');
            }).catch(error=>{

            })
        },
        // 立即购买
        toBuy() {
            let ispay = this.cardlist[this.cardIdx].IsPay;
            if(ispay != 1) {
                this.$toast('请到店支付');
                return false;
            }
            let buyData = [{
                Id:this.goodsid,
                type:2,
                quantity:1,
            }]
            this.actionBuydata(buyData);        //存到store中
            this.$router.push({name:'payment'})
        },
    },
    mounted() {
        this.getProjectCard();
    }
}
</script>
<style lang="less" scoped>
.m-shadow{
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
}
.m-proSpec{
    position: fixed;
    bottom: 0;
    z-index: 3;
    left: 0; right: 0;
    background: white;
    font-size: .9rem;
    padding: .8rem;
    .m-close{
        position: absolute;
        right: 20px;
        top: 16px;
        z-index: 6;
        font-size: 1.2rem;
        color: @secondary-gray;
    }
    .m-proTitle{
        .flex;
        border-bottom: 1px solid @background-gray;
        padding-bottom: .8rem;
        img{
            width: 3rem;
            height: 3rem;
            margin-right: .8rem;
        }
        div{
            line-height: 1.2rem;
            span{
                color: @primary-red;
            }
        }
    }
    .m-specbox{
        padding: .8rem 0;
        p{
            margin-bottom: .8rem;
        }
    }
    .m-speclist{
        .flex;
        flex-wrap: wrap;
        li{
            min-width: 3rem;
            padding: 0 .8rem;
            background: @background-gray;
            line-height: 1.6rem;
            .border-radius(20px);
            margin-right: .8rem;
            margin-bottom: .8rem;
            &.active{
                background: @primary-green;
                color: white;
            }
        }
    }
    .m-conlist{
        li{
            color: @light-gray;
        }
    }
    .m-specbottom{
        .flex;
        .border-radius(20px);
        overflow: hidden;
        text-align: center;
        line-height: 2.2rem;
        font-size: 1.1rem;
        span{
            color: white;
            flex: 1;
            &:first-child{
                background: @primary-yellow;
            }
            &:last-child{
                background: @primary-green;
            }
        }
    }
}
</style>
